<template>
  <footer>
    <h2>Links</h2>
    <ul>
      <li v-for="(current, index) in links" v-bind:key="index">
        <a
          v-bind:href="current.val"
          target="_blank"
          rel="noopener noreferrer"
          >{{ current.key }}</a
        >
      </li>
    </ul>
    <!-- <br /> -->
  </footer>
</template>

<script>
export default {
  name: "Footer",
  props: ["links"]
};
</script>

<style scoped>
footer {
  background-color: var(--brand-colour);
}
ul {
  margin: 0;
  padding-bottom: 12px;
}
</style>
